<template>
  <div class="funnel-config" :style="siteContentViewHeight">
    <funnel-model ref="funnelModel" @callback="updateResult" @toggleLoading="toggleLoading"></funnel-model>
    <funnel-deploy ref="funnelDeploy" :resultParam="resultParam" @save="handleSave" v-loading="loading"></funnel-deploy>
  </div>
</template>

<script>
import funnelModel from './funnel-model'
import funnelDeploy from './funnel-deploy'
export default {
  components: {
    funnelModel,
    funnelDeploy
  },
  data() {
    return {
      tagId: '',
      groupId: 0,
      resultParam: [],
      loading: false
    }
  },
  computed: {
    siteContentViewHeight() {
      return { height: this.$store.getters['common/siteContentViewHeight'] + 'px' }
    }
  },
  created() {
    if (this.$route.query.tagId) {
      this.tagId = this.$route.query.tagId
      this.getFunnelInfo()
    }
    this.groupId = this.$route.query.groupId
  },
  methods: {
    toggleLoading() {
      this.loading = !this.loading
    },
    getFunnelInfo() {
      this.$ajax({
        url: this.$ajax.setUrl(`funnelAnalysis/showFunnelAnalysisInfo/${this.tagId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          const info = {
            funnelAnalysisName: data.data.funnelAnalysisName,
            iconDescription: data.data.iconDescription
          }
          const filters = {
            funnelParam: data.data.funnelParam,
            filteringConditions: data.data.filteringConditions,
            dimensionColumn: data.data.dimensionColumn,
            customers: data.data.customers
          }
          this.$nextTick(() => {
            this.$refs.funnelModel.init(filters)
            this.$refs.funnelDeploy.init(info)
            this.resultParam = data.data.resultParam
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    updateResult(data) {
      this.resultParam = data
    },
    handleSave(data) {
      const filters = this.$refs.funnelModel.getParams()
      let params = {
        customers: filters.customers,
        dimensionColumn: filters.dimensionColumn,
        filteringConditions: filters.filteringConditions,
        funnelParam: filters.funnelParam,
        funnelAnalysisName: data.funnelAnalysisName,
        iconDescription: data.iconDescription,
        resultParam: this.resultParam,
        groupId: this.groupId
      }
      if (this.tagId) params.tagId = this.tagId
      this.$ajax({
        url: this.$ajax.setUrl('funnelAnalysis/saveFunnelInfo'),
        method: 'post',
        data: this.$ajax.setData(params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.tagId = data.data
          this.$message.success(data.msg)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.funnel-config {
  padding: 0 10px;
  background-color: #fff;
}
</style>
